<template>
	<div class="cc-menu">
			<div class="line">
					<a class="hide-menu">隐藏</a>
			</div>
		<slot></slot>
	</div>
</template>
<script type="text/javascript">
	module.exports = {
		created: function() {
			this.$parent.initMenu(this);
		},
		data: function(){
			return {
				title: null
			}
		},
		methods: {
			// menu 点击事件
			clickMenu: function(name) {
				this.$parent.setFrameTitle(name);
			},
			addItem: function(items, item) {
				if(this.title == null) {
					this.title = item;
				}
			}
		}
	}
</script>
<style type="text/css">
.cc-menu {
	float: left;
	width: 160px;
	height: auto !important;
	overflow: visible !important;
	position: fixed;
	height: 100% !important;
	background-color: #3992d0;
	font-size: 12px;
}
.cc-menu dl,
.cc-menu dt,
.cc-menu dd {
	display: block;
	margin: 0;
}
.cc-menu a {
	text-decoration: none;
	cursor: pointer;
}
.cc-menu .line {
	height: 30px;
	width: 100%;
	background:  #2B7DB4;
	color:#fff;
}
.cc-menu .line .hide-menu{
	line-height: 30px;
	float: left;
	padding-left: 10px;
}
.cc-menu dt {
	padding-left: 40px;
	padding-right: 10px;
	background-repeat: no-repeat;
	background-position: 10px center;
	color: whitesmoke;
	font-size: 14px;
	position: relative;
	line-height: 48px;
	cursor: pointer;
}
.cc-menu dd {
	background-color: #317eb4;
	padding-left: 40px;
	display: none;
	padding-top: 10px;
}
.cc-menu dd a {
	color: whitesmoke;
	/*line-height: 20px;*/

}
.cc-menu dt img {
	position: absolute;
	right: 10px;
	top: 20px;
}
.cc-menu .system dt {
	background-image: url();
}
.cc-menu .custom dt {
	background-image: url();
}
.cc-menu .channel dt {
	background-image: url();
}
.cc-menu .app dt {
	background-image: url();
}
.cc-menu .cloud dt {
	background-image: url();
}
.cc-menu .management dt {
	background-image: url();
}
.cc-menu .source dt {
	background-image: url();
}
.cc-menu .statistics dt {
	background-image: url();
}
.cc-menu dl dd:last-child {
	padding-bottom: 10px;
}
.cc-menu .active dd {
	display: block;
}
.cc-menu .arrow {
	position: absolute;
	top: 20px;
	right: 10px;
	/*background: #000;*/
	background: url() no-repeat;
	width: 10px;
	height: 10px;
}
.cc-menu .active .arrow {
	position: absolute;
	top: 20px;
	right: 10px;
	/*background: #000;*/
	background: url() no-repeat;
	width: 10px;
	height: 10px;
}

</style>